
<template>
  <div class="container">
    <my-header></my-header>
    <div class="main">
      <img src="@/assets/images/psychological/icon1.png" class="Pleft"/>
      <div class="box">
        <!-- 标题 -->
        <div class="title">
          <img src="" alt class="logo" />
          <span>心理疏导服务</span>
        </div>

        <!-- 内容 -->
        <div id="content" class="content">
          <div v-for="(item,index) in info" :key="index">
            <!-- 机器人回复 -->
            <div class="info_r info_default" v-if="item.type == 'leftinfo'">
              <img class="circle circle_r" src="@/assets/images/psychological/doctor.svg"/>
              <div class="con_r con_text">
                <div>{{item.content}}</div>
              </div>
              <div class="time_r">{{item.time}}</div>
            </div>

            <!-- 用户信息 -->
            <div class="info_l" v-if="item.type == 'rightinfo'">
              <div class="con_r con_text">
                <span class="con_l">{{item.content}}</span>
                <img v-if="$store.state.user.portrait" :src="$store.state.user.portrait" class="circle circle_l" />
                <img v-else src="@/assets/images/user/logo.png" class="circle circle_l" />
              </div>
              <div class="time_l">{{item.time}}</div>
            </div>
          </div>
        </div>

        <!-- 输入框 -->
        <div class="setproblem">
          <el-input
            type="textarea"
            rows="4"
            placeholder="请输入您的问题..."
            v-model="customerText"
            resize="none"
            size="medium"
            class="textarea"
            @keyup.native.enter="sentMsg()">
          </el-input>
          <el-button
            type="primary"
            @click="sentMsg()">
            发送
            </el-button>
        </div>
      </div>
      <img src="@/assets/images/psychological/icon2.jpg" class="Pright" />
    </div>
  </div>
</template>
<script>
import MyHeader from '@/components/MyHeader.vue'
import { get } from '@/api/request'
export default {
  name: 'onlineCustomer',
  components: { MyHeader },
  data () {
    return {
      customerText: '',
      info: [
        {
          type: 'leftinfo',
          time: this.getTodayTime(),
          name: 'robot',
          content:
              '世界虽不完美，但我们仍可疗愈自己',
          question: []
        }
      ],
      timer: null
    }
  },
  created () {
    this.showTimer()
  },
  methods: {
    // 用户发送消息
    sentMsg () {
      clearTimeout(this.timer)
      this.showTimer()
      const text = this.customerText.trim()
      if (text !== '') {
        const obj = {
          type: 'rightinfo',
          time: this.getTodayTime(),
          content: text
        }
        this.info.push(obj)
        this.appendRobotMsg(this.customerText)
        this.customerText = ''
        this.$nextTick(() => {
          const contentHeight = document.getElementById('content')
          contentHeight.scrollTop = contentHeight.scrollHeight
        })
      }
    },
    // 机器人回答消息
    async appendRobotMsg (text) {
      clearTimeout(this.timer)
      this.showTimer()
      text = text.trim()
      let answerText = ''
      answerText = await get('https://api.ownthink.com/bot', {
        appid: 'xiaosi',
        userid: 'user',
        spoken: text
      })
      if (answerText.data.info.text) {
        const obj = {
          type: 'leftinfo',
          time: this.getTodayTime(),
          name: 'robot',
          content: answerText.data.info.text,
          question: []
        }
        this.info.push(obj)
      } else {
        const obj = {
          type: 'leftinfo',
          time: this.getTodayTime(),
          name: 'robot',
          content: '对不起，我还不太懂这个问题，让我去学习一下吧',
          question: []
        }
        this.info.push(obj)
      }
      this.$nextTick(() => {
        const contentHeight = document.getElementById('content')
        contentHeight.scrollTop = contentHeight.scrollHeight
      })
    },
    // 结束语
    endMsg () {
      const happyEnding = {
        type: 'leftinfo',
        time: this.getTodayTime(),
        content: '每个充满阳光的日子都值得被记录，让我们去发现更多的美好吧！',
        question: []
      }
      this.info.push(happyEnding)
      this.$nextTick(() => {
        const contentHeight = document.getElementById('content')
        contentHeight.scrollTop = contentHeight.scrollHeight
      })
    },
    // 调用结束语
    showTimer () {
      this.timer = setTimeout(this.endMsg, 1000 * 60)
    },
    // 时间戳
    getTodayTime () {
      // 获取当前时间
      const day = new Date()
      let seconds = day.getSeconds()
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      let minutes = day.getMinutes()
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      const time =
          day.getFullYear() +
          '-' +
          (day.getMonth() + 1) +
          '-' +
          day.getDate() +
          ' ' +
          day.getHours() +
          ':' +
          minutes +
          ':' +
          seconds
      return time
    }
  }
}
</script>
<style lang="less" scope>
  .main {
    display: flex;
    position: relative;
    height: 90vh;
    .box {
      flex: 1;
      height: 580px;
      max-width: 900px;
      margin: 20px 40px 10px 0;
      border-radius: 10px;
      padding: 1.25rem;
      background-image: linear-gradient(to top, #fbe1d5 0%, #ace0f9 100%);
      .title {
        margin-bottom: 20px;
      }
    }
    #content {
      height: 65%;
      overflow: auto;
      font-size: 14px;
      padding: 0 25px;
      .circle {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .con_text {
        color: #333;
        margin-bottom: 5px;
      }
      .info_r {
        position: relative;
        .circle_r {
          position: absolute;
          left: 0%;
        }
        .pic_r {
          width: 17px;
          height: 17px;
          margin: 8px;
        }
        .con_r {
          display: inline-block;
          width: 45%;
          min-height: 55px;
          background-color: #e2e2e2;
          border-radius: 6px;
          padding: 10px;
          margin-left: 50px;
          word-break: break-all;
        }
        .time_r {
          margin-left: 45px;
          font-size: 12px;
        }
      }
      .info_l {
        text-align: right;
        color: #ffffff;
        color: #3163C5;
        margin-top: 10px;
        .circle_l {
          vertical-align: -20px;
        }
        .time_l {
          margin-right: 45px;
          font-size: 12px;
          margin-top: 5px;
        }
        .con_l {
          display: inline-block;
          max-width: 40%;
          min-height: 51px;
          background-color: #3163C5;
          border-radius: 6px;
          text-align: left;
          padding: 10px;
          color: #fff;
          margin-right: 5px;
        }
      }
    }
  }
  // 输入框样式
  .setproblem {
    position: relative;
    margin-top: 3.75rem;
  }
  // 发送按钮
  .setproblem button {
    position: absolute;
    right: 5%;
    top: 30%;
  }
  // 左边图片
  .Pleft {
    width: 20%;
    height: 72%;
    background-size: contain;
    transform: rotate(-8deg);
  }
  // 右图片
  .Pright {
    align-self: flex-end;
    width: 20%;
    height: 54%;;
    background-size: contain;
  }
</style>
